<template>
  <text class="ai-icon iconfont" 
    :class="[type, spin ? 'is-spin' : '']" 
    :style="iconStyle">
  </text>
</template>

<script>
  export default {
    name: "ai-icon",
    props: {
      type: String,
      color: String,
      size: {
        type: Number,
        default: 16
      },
      bold: {
        type: Boolean,
        default: false
      },
      shadow: {
        type: Boolean,
        default: false
      },
      spin: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {

      };
    },
    computed: {
      iconStyle: {
        get: function() {
          let size = this.size || 16
          let color = this.color || ''
          let bold = this.bold ? 500: 400
          let shadow = this.shadow ? '1px 1px 2px var(--gray-3)' : 'unset'
          return {'font-size': size + 'px', 'color': color, 'font-weight': bold, 'text-shadow': shadow}
        }
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_icon.scss";
  
  .ai-icon {
    display: inline-block;
    // width: 1em;
    // height: 1em;
    stroke-width: 0;
    fill: currentColor;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  }

  .is-spin {
    animation: spin 1s infinite linear;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(1turn);
    }
  }
</style>